/*
* @Author: Yejing
* @Date: 2023-06-03 15:04:30
* @LastEditors: Yejing
* @LastEditTime: 2023-06-12 17:12:10
* @Description: 菜单弹窗
*/
<template>
	<view class="menu-list-page">
		<u-popup :value="uPopupShow" mode="bottom" height='100%' closeable @close='closeMenu' close-icon-pos="top-right"
			close-icon-size='32' close-icon-color='#fff'>
			<view class="menu-box" :style="{'padding-top': $u.addUnit(statusBarHeight, 'px')}">
				<view class="avatar">
					<u-avatar size="160" style="border-radius: 48rpx;" :show-level='true' :level-icon='$u.file.getMedieUrl(vuex_user_info.userLevelIcon)'
						:src='vuex_user_info.avatar?$u.file.getMedieUrl(vuex_user_info.avatar):$u.file.getMedieUrl(vuex_userDefaultTopImg)'
						mode="square" @click="editClick()"></u-avatar>

				</view>
				<text class="name box-center">{{ vuex_user_info.nickName }}</text>
				<!-- 		<view class="box-center shopRateName">
					{{vuex_user_info.userLevel}}
				</view> -->
				<view class="box-center">
					UID:{{vuex_user_info.newUserRandomId}}
				</view>

				<view class="location box-center">
					<!-- <image style="width: 40rpx; height: 40rpx; margin-right: 20rpx;" :src="contryImg" /> -->
					<text>{{$t("home.address")}}</text>
				</view>
				<view class="menu-list">
					<view class="list" v-for="item in menuList" :key="item.id" @click="menuListClick(item)">
						<view class="info">
							<image class="img box-center" :src="item.img" />
							<text class="box-center font">{{ item.text }}</text>
						</view>
					</view>
				</view>
				<view class="" style="margin-top: 26rpx;">
					<view class="" @click="loginOut" style="display: flex;align-items: center;padding: 10px;">
						<image class="" style="width: 18px;height: 17px;margin-right: 26rpx;" :src="require('static/images/liveBar/out.png')" />
						{{$t('settingInfo.logOut')}}
					</view>
					<view class="" style="margin-top: 70rpx;text-align: center;color: #919191;line-height: 14px;">
					V:{{version}}　
					</view> 

				</view>
			</view>
		</u-popup>

		<modal :show='modal.show' :content='modal.content' @confirmClick='confirmClick' @cancelClick='cancelClick'>
		</modal>
	</view>

</template>

<script>
	export default {
		props: {
			uPopupShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				show: false,
				contryImg: '',
				pofile: require('static/images/home/good-1.png'),
				menuList: [{
						img: require('static/svg/video.svg'),
						text: this.$t("home.MyShop"),
						id: 0,
						url: '/pages/storyType/storeManagement',

					},
					{
						img: require('static/svg/addUser.svg'),
						text: this.$t("home.zhaopinzhubo"),
						id: 1,
						url: 'pages/anchorConsole/anchorConsole'
					},
					{
						img: require('static/svg/2User.svg'),
						text: this.$t("home.frendler"),
						id: 4,
						url: '/pages/friendsList/friendsList',
					},
					{
						img: require('static/svg/ticketStar.svg'),
						text: this.$t("home.dtailse"),
						id: 5
					},
					{
						img: require('static/images/home/financial-1.png'),
						text: this.$t("home.OnlineFinance"),
						id: 2,
						url: '/pages/moneyManagement/online'
					},
					{
						img: require('static/images/home/financial-2.png'),
						text: this.$t("home.OfflineFinance"),
						id: 3,
						url: '/pages/moneyManagement/offline'
					},
					{
						img: require('static/images/start.png'),
						text: this.$t("home.ActivityList"),
						id: 7,
						url: '/pages/moneyManagement/offline'
					},
					{
						img: require('static/images/Paper@2x.png'),
						text: this.$t("home.DailyMission"),
						id: 8,
						url: '/pages/moneyManagement/offline'
					},

				],
				//提示框
				modal: {
					show: false,
					content: ''
				},
				modaltype: '',
				version:uni.getSystemInfoSync().appVersion

			}
		},
	
		computed: {
			statusBarHeight() {
				return this.$store.getters.homePageWindowInfo.statusBarHeight
			}
		},
		methods: {
			//点击菜单
			menuListClick(item) {
				console.log(uni.getSystemInfoSync())
				if (item.url) {
					if (item.id == 1) {
						if (this.vuex_user_info.userType == 2 || this.vuex_user_info.userType == 3) {
							this.$u.route({
								url: item.url,
								params: item.data
							})
						} else {
							this.$u.route({
								url: '/pages/anchorForApply/anchorForApply',
							})
						}
					} else if (item.id == 0) {
						if (this.vuex_user_info.userType == 1 || this.vuex_user_info.userType == 3) {
							this.$u.route({
								url: item.url,
								params: item.data
							})
						} else {
							this.$u.route({
								url: '/pages/storeIntroduction/storeIntroduction',
							})
						}
					} else if (item.id == 7 || item.id == 8) {
						this.$u.toast(this.$t('system.comingSoon'))
					} else {
						this.$u.route({
							url: item.url,
							params: item.data
						})
					}

				} else {
					this.$u.post('/app/h2-sys-config/getConfigKey/officialWebsite').then(res => {

						// #ifdef H5
						window.location.href = res.data;
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.openURL(res.data)

						// #endif
					})

				}
			},
			closeMenu() {
				this.$emit('update:uPopupShow', false);
			},
			// 查看个人主页

			editClick() {
				this.$u.init.whetherToLogin(() => {
					uni.navigateTo({
						url: "/pages/user/components/myUserInfo",
						"animationType": "slide-in-right",
						"animationDuration": 300
					})
				})
			},
			//登出
			loginOut() {
				this.modal.show = true
				this.modal.content = this.$t('settingInfo.doLogOut')
				this.modaltype = 'loginOut'

			},
			//确认
			confirmClick() {
				let url = undefined
				url = '/app/loginOut'
				this.$u.post(url, {}).then(res => {
					this.modal.show = false
					uni.setStorageSync('personalStep1', JSON.stringify({
						firstName: '',
						name: '',
						phone: '',
						phoneCode: '',
						cardFrontUrl: '',
						cardTheBackUrl: '',
						documentType: '2',
						photoUrl: '',
						phoneCountryCode: 1,
					}, ))
					uni.setStorageSync('personalStep2', JSON.stringify({
						shopName: '',
						shopAvatarUrl: '',
						profile: '',
						intro: '',
						shopAddress: '',
						workScene: null
					}))
					uni.setStorageSync('isAccomplishps1', 0)
					uni.setStorageSync('isAccomplishps2', 0)
					// this.$u.vuex('vuex_token', '')
					uni.removeStorageSync('vuex_token');
					this.$u.vuex('vuex_address_info', {})

					uni.reLaunch({
						url: '/pages/login/login'
					})
				})

			},
			//取消
			cancelClick() {
				this.modal.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.menu-list-page {
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;

		.menu-box {
		background: url('../../../static/images/user/user_bg1.png') no-repeat 100% 100% #1b1d29e0;
		background-size: 100% 100%;
			width: 100vw;
			padding: 0 40rpx;
			color: #FFFFFF;
			z-index: 888;
			min-height: 100vh;


			.avatar {
				text-align: center;
				padding-top: 226rpx;

				/deep/ .u-avatar {
					box-sizing: content-box;
					margin: 0 auto;
				}
			}


			.box-center {
				text-align: center;
				display: block;
			}

			.shopRateName {
				color: rgba(95, 100, 140, 1);
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 18rpx;
				width: 80rpx;
				height: 38rpx;
				border-radius: 4rpx;
				border: 1rpx solid rgba(189, 188, 199, 1);
				box-sizing: border-box;
				background: rgba(252, 250, 254, 1);
				line-height: 34rpx;
				text-align: center;
				margin: 20rpx auto;
			}

			.name {
				font-size: 40rpx;
				font-weight: 400;
				margin: 24rpx 0 26rpx 0;
			}

			.location {
				font-size: 28rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.menu-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 60rpx;

				.list {
					width: 47%;
					height: 152rpx;
					background: #2934D0;
					box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 35rpx;
					margin-bottom: 40rpx;
					display: flex;
					align-items: center;

					.info {
						margin: 0 auto;
						text-align: center;

						.img {
							width: 30rpx;
							height: 30rpx;
							margin: 0 auto;
						}

						.font {
							margin-top: 15rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		/deep/.u-close--top-right {
			right: 40rpx;
			top: 130rpx;
		}

		/deep/ .u-avatar__level {
			.u-icon__img {
				width: 26px !important;
			}
		}
	}
</style>